<template>
	<view class="content">
		<!-- <u-navbar :is-back="true" title="通讯录" title-color="#fff" back-icon-color="#fff" :background="background" :border-bottom="true">
		</u-navbar> -->
		<view class="content_top">
			<img class="nav_bar" @click="onNavbar()" src="@/static/images/index/txl_return.png" alt="">
			<view class="content_title">通讯录</view>
			<!-- <view class="content_calendar" @click="onDate()">
				 <img src="@/static/images/top_bnt1.png" class="contentDate_icon" alt="">
				 <span class="contentDate_title">{{date}} {{isByb2 ? '（白班）' : '（夜班）'}}</span>
			</view> -->
		</view>
		<!-- 带班领导、值班电话 -->
		<view class="dbld_view">
			带班领导: <span style="font-weight: bold;margin-left: 20rpx;">{{tableDataObj.Name}} </span>
		</view>
		<view class="zbdh_view">
			值班电话: <span style="font-weight: bold;margin-left: 20rpx;">{{tableData.dutytel}}</span>
		</view>
		<view class="listBox">
			<img  class="listBox_bg" src="@/static/images/index/titele_tongxunlu.png" alt="">
			<view class="mainNr">
				<u-subsection :list="list" :current="curNow" @change="sectionChange" active-color="#fff" inactive-color="#A7ABBB" bg-color="#F1F6FF" button-color="#1B9CFF" font-size="26upx" class="subsection"></u-subsection>
				<view class="teamList">
					<view class="teamListNr" style="width: 100%;" v-if="tableDataObj.Name">
						<img class="ListNr_left" src="@/static/overview/pic_admin.png" alt="">
						<view class="ListNr_right">
							<view class="ListNr_right_title">
								{{tableDataObj.Name}}
							</view>
							<view class="ListNr_right_lable" style="color: #FF4D4D;background: #FFEDED;">
								{{tableDataObj.Position}}
							</view>
						</view>
					</view>
					<view class="teamListNr" v-for="(item, index) in tableDataOne" :key="index">
						<img class="ListNr_left" src="@/static/overview/pic_user.png" alt="">
						<view class="ListNr_right">
							<view class="ListNr_right_title">
								{{item.Name}}
							</view>
							<view class="ListNr_right_lable">
								{{item.Position}}
							</view>
						</view>
					</view>
				</view>
				<!-- 分割线 -->
				<img  class="fengexian" src="@/static/images/fengexian.png" alt="">
				<view class="userList">
					通讯录 （{{tableList.length}}人）
				</view>
				<u-search style="margin: 10rpx 30rpx;height: 80rpx;" placeholder="请输入关键字" @search="onSearch()" v-model="keyword" background-color="#F5F6FA" search-icon-color="#CCCCCC" placeholder-color="#CCCCCC" :show-action="false"></u-search>
				<view class="tableListMain">
					<view class="tableListItem" v-for="(item,index) in tableList" :key="index" :style="index == tableList.length -1 ? 'border:none' : ''">
						<img src="@/static/overview/pic_user2.png" class="pic_user2" alt="">
						<view class="tableListItem_main">
							<view class="tableListItem_main_name">
								{{item.Name}}
							</view>
							<view class="tableListItem_bumen">
								{{item.Dept}} {{item.Position}} 
							</view>
						</view>
						<view class="tableListItem_phone">
							<img src="@/static/overview/listPhone.png" class="listPhone" alt="">
							<a :href="'tel:'+item.Tel">{{item.phone}}</a>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		<!-- 日历 -->
		<u-calendar v-model="isCalendar"  @change="changeDate" active-bg-color="#1B9CFF">
			<view slot="tooltip">
				<view class="bomTab">
					<view class="bomTab_view" @click="onByb" :style="isByb ? 'background: #1B9CFF;color: #fff;border: 0': ''">
						白班
					</view>
					<view class="bomTab_view" @click="onByb" :style="!isByb ? 'background: #1B9CFF;color: #fff;border: 0': ''">
						夜班
					</view>
				</view>
			</view>
		</u-calendar>
	</view>
</template>

<script>
	export default {
		watch: {
		    // 监听路由变化
		    '$route'(to, from) {
		      if (to.path === '/pagesJK/phoneListPage/index') {
		        	this.initPage()
		      }    
		    }
		},
		data() {
			return {
				date: '',
				isByb: true,
				isByb2: true,
				isCalendar: false,
				tableDataObj: {},
				tableData: {},
				curNow: 0,
				
				background: {
					backgroundColor: '#1B9CFF',
				},
				keyword: '',
				tableList: [],
				list: [
					{
						name: '当前班组'
					}, 
					{
						name: '接班班组'
					}
				],
				tableDataOne: []
			}
		},
		onLoad() {
			// 获取当前时间
			// this.initializeDatelist()
		},
		mounted() {
			this.initPage()
		},
		methods: {
			onNavbar(){
				// 返回上一级页面
				uni.navigateBack({
				  delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
				});
			},
			// 日期显示隐藏
			onDate(){
				this.isCalendar = !this.isCalendar
			},
			// 导航班组切换
			sectionChange(index) {
				if(index == 0){
					this.tableDataOne = this.tableData.DutyUsers
					this.tableDataObj = this.tableDataObj1
				}else if(index == 1){
					this.tableDataOne = this.tableData.ShfitUsers
					this.tableDataObj = this.tableDataObj2
				}
				this.curNow = index;
			},
			// 获取当前时间
			initializeDatelist() {
			  const today = new Date();
			  const tomorrow = new Date(today);
			  tomorrow.setDate(today.getDate() + 1);
			  function formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			  }
			  if(!this.isBeforeMorning2()){
				  localStorage.setItem('category', 2);  //缓存白天还是夜班 1白班 2夜班
				  this.isByb = false
				  this.isByb2 = false
			  }
			  if(localStorage.getItem('pageDate')){
				this.date = localStorage.getItem('pageDate')
			  }else{
				this.date = formatDate(today);
			  }
			  if(localStorage.getItem('category') == 1){
				  this.isByb = true
				  this.isByb2 = true
			  }else if(localStorage.getItem('category') == 2){
				  this.isByb = false
				  this.isByb2 = false
			  }
			},
			//判断当前时间是否是早上8点15分之前
			isBeforeMorning() {
			  const now = new Date();
			  const hour = now.getHours();
			  const minute = now.getMinutes();
			
			  // 早上8点15分之前的条件是小时小于8或者小时为8但分钟小于15
			  return hour < 8 || (hour === 8 && minute < 15);
			},
			//判断当前时间是否是早上17点45分之前
			isBeforeMorning2() {
			  const now = new Date();
			  const hour = now.getHours();
			  const minute = now.getMinutes();
			
			  // 早上17点45分之前的条件是小时小于17或者小时为17但分钟小于45
			  return hour < 17 || (hour === 17 && minute < 45);
			},
			// 切换白夜班
			onByb(){
				this.isByb = !this.isByb
			},
			// 选择日期
			changeDate(e){
				this.date = e.result
				this.isByb2 = this.isByb
				if(this.isToday(e.result) && this.isBeforeMorning()){
					const previousDay = this.getPreviousDay(e.result)
					localStorage.setItem('pageDate', previousDay.toISOString().split('T')[0]);  //缓存时间
					localStorage.setItem('category', 2);  //缓存白天还是夜班 1白班 2夜班
					this.$nextTick( ()=> {
							this.initPage()
					})
				}else{
					localStorage.setItem('pageDate', e.result);  //缓存时间
					localStorage.setItem('category', this.isByb ? 1 : 2);  //缓存白天还是夜班 1白班 2夜班
					this.$nextTick( ()=> {
							this.initPage()
					})
				}
			},
			initPage(){
				this.getmailList()
				this.getshiftduty(localStorage.getItem('pageDate') ,localStorage.getItem('category'))
			},
			//判断日期是否是今天
			isToday(date) {
			  const today = new Date();
			  const inputDate = new Date(date);
			
			  // 去除时间部分，只比较日期
			  today.setHours(0, 0, 0, 0);
			  inputDate.setHours(0, 0, 0, 0);
			
			  // 比较年、月、日是否相同
			  return today.getFullYear() === inputDate.getFullYear() &&
			         today.getMonth() === inputDate.getMonth() &&
			         today.getDate() === inputDate.getDate();
			},
			//交接班
			async getshiftduty(dates,categorys){
				this.tableData = {}
				let params = `?date=${dates}&category=${categorys}`
				let	data = await this.$api.getshiftdutyData(params);
				// console.log('概览 - 交接班res',data)
				if (data.Code == 200) {
					
					let arr = []
					let arr2 = []
					if(data.Data.DutyUsers.length > 0){
						//白班数据处理
						data.Data.DutyUsers.forEach(item => {
							if(!item.IsLeader){
								arr.push(item)
							}
							if(item.IsLeader){
								this.tableDataObj = item
								this.tableDataObj1 = item
							}
						})
					
					}
					if(data.Data.ShfitUsers.length > 0){
						//夜班数据处理
						data.Data.ShfitUsers.forEach(item => {
							if(!item.IsLeader){
								arr2.push(item)
							}
							if(item.IsLeader){
								this.tableDataObj2 = item
							}
						})
					}
					data.Data.DutyUsers = arr
					data.Data.ShfitUsers = arr2
					this.tableDataOne = arr //默认白班
					this.tableData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}	
			},
			//概况-查询通讯录信息
			async getmailList() {
				this.tableList = []
				let params = `?keyword=${this.keyword}`
				let	data = await this.$api.getmailList(params); 
				// console.log(' 查询通讯录信息',data)
				if (data.Code == 200) {
					//1 利用正则划分手机号码
					const reg = /^(\d{3})(\d{4})(\d{4})$/
					data.Data.forEach(item => {
						item.phone = item.Tel.replace(reg, "$1****$3")
					})
					this.tableList = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}		
			},
			onSearch(){
				this.getmailList()
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	width: 750rpx;
	background: url(@/static/images/index/index_topbg.png) no-repeat;
	background-size: 750rpx;
	background-position: 0 -34rpx;
	background-color: #ECF0F9;
	.content_top{
			display: flex;
			align-items: center;
			width: 100%;
			height: 88rpx;
			background-color: #4A98ED;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			.nav_bar{
				width: 36rpx;
				margin-left: 26rpx;
			}
			.content_title{
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFFFFF;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin: 0 68rpx 0 36rpx;
			}
			.content_calendar{
				width: 467rpx;
				height: 70rpx;
				background: #408DDF;
				border-radius: 16rpx;
				margin-right: 14rpx;
				display: flex;
				align-items: center;
				.contentDate_icon{
					width: 36rpx;
					height: 36rpx;
					margin: 0 28rpx 0 22rpx;
				}
				.contentDate_title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 0rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
			.phoneList_view{
				width: 70rpx;
				height: 70rpx;
				background: #5BA4EC;
				border-radius: 16rpx;
				.phoneList_icon{
					width: 40rpx;
					height: 40rpx;
					margin: 16rpx;
				}
			}
	}
	.dbld_view,.zbdh_view{
		padding-top: 310rpx;
		height: 32rpx;
		font-family: DIN, DIN;
		font-size: 24rpx;
		color: #2654B0;
		text-align: left;
		font-style: normal;
		text-transform: none;
		text-indent: 320rpx;
	}
	.zbdh_view{
		padding-top: 42rpx;
	}
	.listBox{
		width: 710rpx;
		margin: 72rpx auto;
	}
	.listBox_bg{
		height: 130upx;
	}
	.mainNr{
		width: 710rpx;
		margin: 0 auto;
		margin-top: -24rpx;
		position: relative;
		background: #FFFFFF;
		box-shadow: 0px 0px 10rpx 1px rgba(218,231,254,0.2);
		border-radius: 16rpx;
		border: 1px solid #DAE8FE;
		overflow: hidden;
		padding-top: 24rpx;
		padding-bottom: 34rpx;
		.subsection{
			width: 672upx;
			height: 60upx;
			margin: 0 0 22upx 16upx;
		}
		.subsection2{
			width: 575upx;
			height: 60upx;
			margin: 32rpx auto;
		}
		.teamList{
			margin: 30rpx 15rpx;
			display: flex;
			flex-wrap: wrap;
			.teamListNr{
				height: 95rpx;
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				margin-left: 26rpx;
				.ListNr_left{
					width: 72rpx;
					height: 72rpx;
					margin-right: 18rpx;
				}
				.ListNr_right{
					display: block;
					.ListNr_right_title{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 34rpx;
						color: #333333;
						line-height: 45rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.ListNr_right_lable{
						padding: 5rpx 14rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #1B9CFF;
						display: block;
						background: rgba(27,156,255,0.16);
						margin-top: 5rpx;
						width: fit-content;
					}
				}
			}
		}
		.fengexian{
			width: 710rpx;
		}
	}
	.userList{
		width: 750rpx;
		height: 78rpx;
		line-height: 78rpx;
		text-indent: 30rpx;
		background: #FFFFFF;
	}
	.tableListMain{
		padding:10rpx 30rpx;
		background-color: #FFFFFF;
		.tableListItem{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1px solid #E5E5E5;
			.pic_user2{
				width: 88rpx;
				height: 88rpx;
			}
			.tableListItem_main{
				margin-left: 20rpx;
				margin-right: auto;
				.tableListItem_main_name{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 34rpx;
					color: #333333;
					line-height: 45rpx;
					font-style: normal;
					text-transform: none;
				}
				.tableListItem_bumen{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #7F8389;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-top: 7rpx;
				}
			}
			.tableListItem_phone{
				height: 60rpx;
				background: #1B9CFF;
				border-radius: 16rpx;
				padding: 14rpx 20rpx;
				display: flex;
				align-items: center;
				font-family: Segoe UI, Segoe UI;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				font-style: normal;
				text-transform: none;
				.listPhone{
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
				a{
					color: #fff;
					text-decoration: none; 
				}
			}
		}
	}
}
// 日历里面切换白班夜班
.bomTab{
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 40rpx;
	left: 40rpx;
}
.bomTab_view{
	width: 130rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	background: #fff;
	border-radius: 24rpx;
	font-size: 30rpx;
	color: #5F6475;
	margin-right: 40rpx;
	border: 1px solid #B6B6B6;
}
.popupBox{
	.titleView{
		width: 100%;
		height: 93upx;
		line-height: 93upx;
		background: #1B9CFF;
		font-family: Segoe UI, Segoe UI;
		font-weight: bold;
		font-size: 32upx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		
	}
	.boxNr{
		width: 500rpx;
		background: #F7F9FC;
		overflow-y: auto;
	}
	.nrTitle{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28upx;
		color: #000000;
		font-style: normal;
		text-transform: none;
		padding: 28upx 30upx;
	
	}

}
/deep/ .u-item-bg,.u-subsection{
	border-radius: 30upx !important;
}
/deep/ .u-calendar__bottom__choose{
	display: none !important;
}
/deep/ .u-calendar__bottom__btn{
	width: 290rpx;
	height: 83rpx;
	border-radius: 16rpx;
	margin-left: 60%;
}
/deep/ .u-btn--primary{
	border: #1B9CFF;
	background: #1B9CFF;
}
/deep/ .u-calendar__content--start-date{
	border-radius: 50%;
}
//解决导航标题文字隐藏
/deep/ .u-navbar-content-title{
	width: 550rpx !important;
	left: 100rpx !important;
	right: 100rpx !important;
}
</style>
